<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="keywords"
        content="富文本编辑器、树形列表、树形控件、树控件、手风琴、拾色器、多文件上传、弹窗组件、模态窗口、双向联动表单、右键菜单、jquery拖动、draggable、datagrid、tree、mvvm、combox、tab" />
    <meta name="description"
        content="Bui editor ui框架是一套前后端分离，包含富文本编辑器、双向联动表单、树形列表、树形控件、模态窗口、手风琴、拾色器、多文件上传、弹窗组件等全功能UI框架。还包括Spring mvc spring mybatis高效开发框架" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="bookmark" href="/favicon.ico" />
    <meta name="renderer" content="webkit|ie-stand" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/default-2.0.0.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/font/bui-fonts.css" />
    <script type="text/javascript" src="../javascript/bui-2.0.0.js"></script>
    <script type="text/javascript" src="../lib/vue.min.js"></script>
    <script type="text/javascript" src="lang_config.js"></script>
</head>

<body>
    <div>
        <div id="formwrap">
            <h5>双向联动表单，依赖vue，需要引入vue库</h5>
            <table id="form_table" class="k_form_table">
                <tr>
                    <td class="label label20">年龄</td>
                    <td>
                        <input id="numInput" name="numInput" style="width: 400px;" v-model="numInput" placeholder="0" type="text">
                    </td>
                </tr>
                <tr>
                    <td class="label label20">状态</td>
                    <td>
                        <input id="userStatus" name="userStatus" value="1" type="hidden">
                    </td>
                </tr>
                <tr>
                    <td class="label label20">姓名</td>
                    <td>
                        <input id="userChName" name="userChName" style="width: 400px;" placeholder="请输入中文名" type="text">
                    </td>
                </tr>
                <tr>
                    <td class="label label20">账号</td>
                    <td>
                        <input id="userName" name="userName" style="width: 400px;" placeholder="请输入账号" type="text">
                    </td>
                </tr>
                <tr>
                    <td class="label label20">毕业院校</td>
                    <td>
                        <input id="school" name="school" style="width: 400px;" placeholder="请输入" value="桂林电子科技大学"
                            type="text">
                    </td>
                </tr>
                <tr>
                    <td class="label label20">密码</td>
                    <td>
                        <input id="passwd" name="passwd" style="width: 400px;" placeholder="请输入密码" type="password">
                    </td>
                </tr>
                <tr>
                    <td class="label label20">薪酬</td>
                    <td>
                        <input id="expSalary" name="expSalary" style="width: 400px;" placeholder="仅限数值输入" type="text">
                    </td>
                </tr>
                <tr>
                    <td class="label label20">性别</td>
                    <td>
                        <label class="k_radio_label">
                            <input type="radio" name="sex" value="1" checked="checked"><i class="k_radio_i"></i>男
                        </label>
                        <label class="k_radio_label">
                            <input type="radio" name="sex" value="2"><i class="k_radio_i"></i>女
                        </label>
                    </td>
                </tr>
                <tr>
                    <td class="label label20">爱好</td>
                    <td>
                        <label class="k_checkbox_label k_checkbox_anim">
                            <input type="checkbox" name="lovers" value="1"><i class="k_checkbox_i"></i>篮球
                        </label>
                        <label class="k_checkbox_label k_checkbox_anim">
                            <input type="checkbox" name="lovers" value="2" checked="checked"><i
                                class="k_checkbox_i"></i>跑步
                        </label>
                        <label class="k_checkbox_label k_checkbox_anim">
                            <input type="checkbox" name="lovers" value="3" checked="checked"><i
                                class="k_checkbox_i"></i>吉他
                        </label>
                    </td>
                </tr>
                <tr>
                    <td class="label label20">经验</td>
                    <td>
                        <textarea id="express" name="express" class="k_box_size" placeholder="请输入最近三年工作经验"
                            style="width: 400px;"></textarea>
                    </td>
                </tr>
                <tr>
                    <td class="label label20">贯籍</td>
                    <td>
                        <input id="userAddr" name="userAddr" class="form_combox" style="width: 400px;" type="text" />
                    </td>
                </tr>
                <tr>
                    <td class="label label20">技能</td>
                    <td>
                        <input id="userSkill" name="userSkill" style="width: 400px;" type="text" />
                    </td>
                </tr>
                <tr>
                    <td class="label label20">入职日期</td>
                    <td>
                        <input id="workDate" name="workDate" class="form_calendar" style="width: 400px;" type="text" />
                    </td>
                </tr>
                <tr>
                    <td class="label label20">上班时间</td>
                    <td>
                        <input id="workTime" name="workTime" class="form_calendar" style="width: 400px;" type="text" />
                    </td>
                </tr>
                <tr>
                    <td class="label label20">其他说明</td>
                    <td>
                        <input id="desps" name="desps"  style="width: 400px;" type="text" />
                    </td>
                </tr>
                <tr>
                    <td class="label label20">原生下拉</td>
                    <td>
                        <select id="sourceSels" name="sourceSels">
                            <option value="01">选项1</option>
                            <option value="02" selected="selected">选项2</option>
                            <option value="03">选项3</option>
                            <option value="">请选择</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="label label20">所属部门:</td>
                    <td>
                        <ul id="userDep" name="userDep"></ul>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="padding-left: 25%;">
                        <button onclick="saveFn(this)" class="k_common_button"><i
                                class="fa fa-ok"></i><span>保存</span></button>
                        <button onclick="updateFn(this)" class="k_common_button"><i
                                class="fa fa-pencil-1"></i><span>修改数据</span></button>
                    </td>
                </tr>
            </table>
            <div id="retjson" style='padding:20px 50px'></div>
        </div>
    </div>
    <script type="text/javascript">
        var retBean;
        var depData = [{
            id: 99,
            text: '研发中心',
            children: [{
                id: 1,
                text: '服务器组',
                children: [{
                    id: 11,
                    text: 'java组'
                }, {
                    id: 12,
                    text: 'c#组'
                }]
            }, {
                id: 2,
                text: '前端组',
                children: [{
                    id: 21,
                    text: '设计组'
                }, {
                    id: 22,
                    text: '开发组'
                }]
            }]
        }];

        var skillData = [{
            id: 1,
            text: '服务器编程',
            children: [{
                id: 11,
                text: 'java'
            }, {
                id: 12,
                text: 'c#'
            }]
        }, {
            id: 2,
            text: '前端编程',
            children: [{
                id: 21,
                text: 'html/css'
            }, {
                id: 22,
                text: 'javascript'
            }]
        }];
        var userAddrData = [
            {
                id: "0001",
                text: "广西"
            }, {
                id: "0002",
                text: "广州"
            }, {
                id: "0003",
                text: "湖南"
            }
        ];
        $B.DomUtils.onDomLoaded(function () {
            var $retJSONeL = document.getElementById("retjson");
            var bean = { express: '这是我的经验', userName: 'kevin Mr', userChName: '中子星', userAddr: ["0003"], userSkill: ['11', '22'], workDate: '2021-08-21', workTime: '10:10:10' };
            retBean = $B.vueForm(
                "form_table",
                bean,
                {
                    numInput:{
                        ctl:'NUMInputCtl',
                        opts:{   
                            min:0,
                            max:10,           
                            step:0.1
                        }
                    },
                    userStatus:{
                        ctl:'switchCtl',
                        opts:{
                            trueText:"在职",
                            falseText:"离职"
                        }
                    },
                    userAddr: {
                        ctl: 'Combox',
                        opts: {
                            data: userAddrData,
                            url: 'comboxtree.json',
                            isTree: true,
                            inputImdSearch: true,
                            multiple: false,
                            readOnly: false,
                            onSelected: function (data) {
                                console.log(data);
                            },
                            onloaded: function (data) {
                                console.log(data);
                            }
                        }
                    },
                    workDate: {
                        ctl: 'Calendar',
                        opts: {
                            fmt: 'yyyy-MM-dd',
                            show: false,
                            readonly: true,
                            clickHide: true,
                            onChange: function (date) {
                                var day = date.getDate();
                                if (day < 10) {
                                    return "自定义限制:<span style='color:red'>只能选择10号及以上的日期！</span>";
                                }
                            }
                        }
                    },
                    workTime: {
                        ctl: 'Calendar',
                        opts: {
                            fmt: 'hh:mm:ss',
                            show: false,
                            readonly: false,
                            clickHide: true
                        }
                    },
                    userSkill: {
                        ctl: 'Combox',
                        opts: {
                            data: skillData,
                            isTree: true,
                            inputImdSearch: false,
                            multiple: true,
                            readOnly: true,
                            onSelected: function (data) {
                                console.log(data);
                            },
                            onloaded: function (data) {
                                console.log(data);
                            }
                        }
                    },
                    userDep: {
                        ctl: 'Tree',
                        opts: {
                            nodeParentIcon: 'fa-folder-empty',//父节点图标关闭状态
                            nodeParentOpenIcon: 'fa-folder-open-empty',      //打开状态图标
                            leafNodeIcon: 'fa-mail-alt',                //子节点图标 
                            chkEmptyIcon: 'fa-check-empty',            //不选
                            chkAllIcon: 'fa-check',            //全选
                            chkSomeIcon: 'fa-minus-squared',              //部分选 ***/      
                            fontIconColor: '#8E03F5',
                            showLine: true,
                            plainStyle: true,
                            tree2list: true,
                            data: depData,
                            //url:'tree.json',
                            checkbox: true,
                            toolbarHide: 'auto',
                            clickCheck: true,
                            onClick: function (e) {
                                console.log("on click");
                                console.log(e.data);
                            },
                            onChecked: function (data, ischecked) {
                                console.log("onChecked ");
                                console.log(JSON.stringify(data));
                            }
                        }
                    }
                },
                {
                    verifyOnChange:true,
                    verify: { //定义验证字段 ，字符串，数组，对象
                        "numInput":[{rule:"range",min:0,max:10}],
                        "userChName": ['require', 'chchar'],
                        "userName": ['require', { rule: 'userName', label: '用户名不合法，仅限字母数字、下划线' }],
                        "passwd": ['require', 'password'],
                        "expSalary": ["number", { rule: "range", min: 10000, max: 30000, label: '薪酬范围无效,限10000~30000！' }],
                        "lovers": {rule:'require',label:'爱好是不能少的！'},
                        "express": [{ rule: 'minlength', len: 5 }, { rule: 'maxlength', len: 20, label: '不能超过20个字符！' }],
                        "userAddr": ["require"],
                        "desps":{"reg":/^[\u4E00-\u9FA5|\d*]+$/,label:'不是合法的数据！'},
                        "userSkill": { rule: 'require', label: '技能不能少啊！' },
                        "workDate":[ { rule: "require", label: '入职时间不能为空！' },(formName,values,$form)=>{
                            //只能上半月入职
                            values = values.split("-");
                            if(parseInt( values[values.length-1]) > 15){
                                return "只能上半月入职哦！";
                            }
                        }],
                        "sourceSels": {rule:"require",label:'该项目必须选择!'},
                        "school": { reg: /^[\u4E00-\u9FA5]+$/, label: '院校名称非法！' },
                        "userDep": (formName,values,$form) => {
                            if (values.length === 0) {
                                return "请勾选归属部门";
                            }
                            if (values.length !== 1) {
                                return "仅限归属一个部门";
                            }
                        },
                        workTime:(formName,values,$form)=>{
                            values = values.split(":");
                            let hour = parseInt( values[0]);
                            if( hour < 7 || hour > 20 ){
                                return "不正常的上班时间！(8~20点)";
                            }
                        }
                    },
                    onUpateFn: () => {
                        console.log("UI发生了更新");
                    },
                    onChange: (name, newVal, oldVal) => {
                        console.log(name + " 属性值变化,newVal=" + newVal + " oldVal=" + oldVal);
                        $retJSONeL.innerText = retBean.toJSONStr();

                    }
                });
                console.log(retBean.toJSON());
                console.log(retBean.toJSONStr());
                console.log(retBean.toJSONStr(true));
                //测试验证开关控件
                // $B.switchCtl("userStatus",{
                //     trueText:"在职",
                //     falseText:"离职",                  
                //     onChange:(id,value,oldVal)=>{
                //         console.log(id,value,oldVal);
                //     }
                // });
        });

        function saveFn() {
            if(retBean.toVerify()){
                console.log(retBean.toJSON());
                console.log(retBean.toJSONStr());
                console.log(retBean.toJSONStr(true));
                $B.success("保存成功！",1.5);
            }else{
                $B.error("数据验证没有通过！",1.5);
            }           
        }
        function updateFn() {
            console.log("starting update");
            retBean.userChName = "天健行";
            retBean.sex = "2";
            retBean.lovers = ["1"];
            retBean.passwd = "Abc*123c";
            retBean.expSalary = 22000;
            retBean.userAddr = ['0002'];
            retBean.userSkill = [12, 21];
            retBean.workDate = "2021-09-01";
            retBean.userDep = [ 21];
            retBean.workTime = '09:08:08';
            retBean.userStatus = "1";
            console.log("started update");
        }

    </script>
</body>

</html>